<script setup lang="ts">
interface Props {
  open?: boolean
}
defineProps<Props>()
</script>

<template>
  <button class="menu-icon" :class="{ open }">
    <div class="menu-icon-bar top"></div>
    <div class="menu-icon-bar middle"></div>
    <div class="menu-icon-bar bottom"></div>
  </button>
</template>

<style lang="scss" scoped>
.menu-icon {
  width: 1em;
  height: 1em;
  display: inline-flex;
  flex-direction: column;
  justify-content: space-between;
  border: none;
  background: none;
  outline: none;
  .menu-icon-bar {
    display: block;
    width: 1em;
    height: 0.2em;
    border-radius: 0.1em;
    background-color: currentColor;
    transition: all 0.25s ease;
    pointer-events: none;
  }
  .top,
  .bottom {
    transform-origin: 0.1em center;
  }
  &.open {
    .top {
      transform: rotate(45deg);
    }
    .middle {
      width: 0;
    }
    .bottom {
      transform: rotate(-45deg);
    }
    .top,
    .bottom {
      width: 1.2727922061357857em;
    }
  }
}
</style>
